<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>开始答题</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/common.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/common.js"></script>
</head>
<style>
    li.item {
        padding: 20px 0 10px 0;
        border-bottom: 1px solid #ccc;
    }

    li.item:first-child {
        padding-top: 0;
    }

    .el-radio {
        margin-bottom: 10px;
    }

    .answerContent {
        margin-top: 10px;
    }

    .answerContent ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 20px;
    }

    .answerContent ul li {
        padding-right: 20px;
    }

    .resultDialog p {
        font-size: 16px;
    }
</style>
<body>
<div id="app">
    <el-row>
        <el-col :span="14" :offset="5">
            <div class="container">
                <div class="button-bar">
                    <div></div>
                    <div class="return-btn" title="返回主页" @click="returnHome">
                        <el-button type="warning" size="small" plain>
                            <i class="el-icon-back"></i>
                        </el-button>
                    </div>
                </div>
                <el-form :label-position="labelPosition" label-width="80px">
                    <ul>
                        <li v-for="(item, index) of records" class="item">
                            <div>
                                <div class="quesContent">{{index + 1}} . {{item.quesContent}}：</div>
                                <div class="answerContent">
                                    <el-radio-group
                                            @change="(value)=>{selectRadio(value, item.id, item.rightAnswerId, index)}"
                                            v-model="records[index].checkedAnswer">
                                        <el-radio v-for="(answer, idx) of item.answerList" :label="answer.id">
                                            {{answer.ansContent}}
                                        </el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div style="display: flex;align-items: center;justify-content: flex-end;margin-top: 20px;">
                        <el-button type="success" @click="onSubmit" size="medium">提交</el-button>
                    </div>
                </el-form>
            </div>
        </el-col>
    </el-row>
    <el-dialog
            title="测试结果"
            :visible.sync="dialogVisible"
            width="20%"
            :show-close="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            class="resultDialog">
        <p>正确数：<span class="font-success bold">{{rightCount}}</span></p>
        <p>错误数：<span class="font-danger bold">{{wrongCount}}</span></p>
        <p>正确率：<span class="font-warning bold">{{rightCount/records.length*100 + "%"}}</span></p>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="restart">再次答题</el-button>
            <el-button type="primary" @click="showDetail">查看记录</el-button>
        </span>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                labelPosition: 'top',
                paperId: "",
                records: [],
                selectAnswerList: [],
                selectAnswerJson: [],
                // 回答正确数
                rightCount: 0,
                // 回答错误数
                wrongCount: 0,
                // 显示弹出框
                dialogVisible: false
            };
        },
        methods: {
            // 获取试题列表
            getList() {
                const loading = showLoading(this);
                axios.get('/paper/t-paper/cachePaper')
                    .then(res => {
                        console.log(res)
                        if (res.data.code === '200') {
                            if (res.data.model != null) {
                                this.$confirm('您有未完成的试卷, 是否继续?', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    loading.close();
                                    this.paperId = res.data.model.paperId;
                                    const records = JSON.parse(res.data.model.records);
                                    this.records = records;
                                    const that = this;
                                    records.forEach((ele, index) => {
                                        that.selectAnswerJson[index] = {
                                            checkedAnswer: ele.checkedAnswer,
                                            id: ele.id,
                                            rightAnswerId: ele.rightAnswerId
                                        };
                                    });
                                }).catch(() => {
                                    axios.get(`/paper/t-paper/createPaper`)
                                        .then(res => {
                                            loading.close();
                                            this.paperId = res.data.model.paperId;
                                            this.records = res.data.model.records;
                                        })
                                        .catch(err => {
                                            console.log(err);
                                            loading.close();
                                        })
                                });
                            } else {
                                axios.get(`/paper/t-paper/createPaper`)
                                    .then(res => {
                                        loading.close();
                                        this.paperId = res.data.model.paperId;
                                        this.records = res.data.model.records;
                                    })
                                    .catch(err => {
                                        console.log(err);
                                        loading.close();
                                    })
                            }
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            // 返回主页
            returnHome() {
                window.location.href = `./index.html`
            },
            // 选择答案回调函数
            selectRadio(checkedAnswer, quesId, rightAnswerId, index) {
                this.selectAnswerJson[index] = {checkedAnswer, id: quesId, rightAnswerId};
                this.records[index].checkedAnswer = checkedAnswer;
                axios({
                    url: '/paper/t-paper/cachePaper',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    params: {
                        paperId: this.paperId,
                        records: encodeURI(JSON.stringify(this.records))
                    }
                }).then(res => {
                    if (res.data.code === '200') {
                        console.log(res);
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            // 提交试卷
            onSubmit() {
                const json = this.selectAnswerJson;
                if (json.length < this.records.length) {
                    this.$message.error('错了哦，完成全部考题才能提交');
                    return false;
                }
                // 统计正确数和错误数
                for (let ele of json) {
                    if (!ele) {
                        this.rightCount = 0;
                        this.wrongCount = 0;
                        this.$message.error('错了哦，完成全部考题才能提交');
                        return false;
                    }
                    if (ele.checkedAnswer === ele.rightAnswerId) {
                        this.rightCount++;
                    } else {
                        this.wrongCount++;
                    }
                }
                // 显示加载框
                const loading = showLoading(this);

                axios({
                    url: '/paper/t-paper/finishPaper/PC',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    params: {
                        paperId: this.paperId,
                        records: encodeURI(JSON.stringify(this.selectAnswerJson)),
                        rightCount: this.rightCount,
                        wrongCount: this.wrongCount
                    }
                }).then(res => {
                    loading.close();
                    if (res.data.code === '200') {
                        console.log(res);
                        this.dialogVisible = true;
                    }
                }).catch(err => {
                    loading.close();
                    console.log(err)
                })
            },
            // 再次答题
            restart() {
                window.location.reload();
            },
            // 查看试卷详情
            showDetail() {
                window.location.href = `./paperDetail.html?id=${this.paperId}`;
            }
        },
        mounted: function () {
            this.getList()
        }
    })
</script>
</html>